<template>
    <div class="total-box">

        <div class="total-box-body">
            <div class="total-box-body-main">


                <div class="body-header">

                    <div>
                        <el-date-picker v-model="data_value" type="datetimerange" range-separator="To"
                            start-placeholder="Start date" end-placeholder="End date" />
                    </div>
                    <el-select v-model="selectvalue" class="m-2" placeholder="全部类型" style="margin-left: 10px;">
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                    <div class="body-header-search" style="margin: 0px 10px;">

                        <div style="min-width: 300px;">
                            <el-input v-model="input" placeholder="请输入搜索内容" class="input-with-select">
                                <template #prepend>
                                    <el-select v-model="select" placeholder="手机号" style="width: 115px">
                                        <el-option label="手机号" value="手机号" />
                                        <el-option label="姓名" value="姓名" />
                                        <el-option label="昵称" value="昵称" />
                                        <el-option label="会员卡号" value="会员卡号" />
                                        <el-option label="订单编号" value="订单编号" />
                                    </el-select>
                                </template>
                                <template #append>
                                    <el-button :icon="Search" />
                                </template>
                            </el-input>
                        </div>
                    </div>
                    <div style="display: flex;justify-content: right;min-width: 40%;">
                        <div></div>
                        <div>
                            <el-button type="primary">查询</el-button>
                            <el-button type="primary">重置</el-button>
                        </div>
                    </div>
                </div>
                <div class="body-main">
                    <div style="width: 98%;margin: 10px 0px;">
                        <!--  <table class="table">
                            <thead>

                                <th style="width: calc(35% / 2)">用户信息</th>
                                <th style="width: 10%;">充值金额</th>
                                <th style="width: 10%">充值类型</th>
                                <th style="width: calc(35% / 3)">操作员</th>
                                <th style="width: calc(35% / 3)">操作</th>

                            </thead>
                            <tbody v-for="item in tableData.splice((currentPage-1)*pageSize,currentPage*pageSize)">
                                <tr>

                                    <td style="height: 30px;">
                                        <div style="display: flex;">
                                            <div style="margin: 0px 10px;">
                                                订单编号:{{ item.carid }}
                                            </div>
                                            <div>
                                                下单时间:{{ item.carid }}
                                            </div>
                                            <div>
                                                备注:{{ item.carid }}
                                            </div>
                                        </div>
                                    </td>

                                </tr>
                                <tr style="height: 50px;">
                                    <td>
                                        <div style="display: flex; align-items: center">
                                            <div style="width: 50px;height: 50px;">
                                                <img />
                                            </div>
                                            <div>
                                                <div style="margin-left: 10px">用户昵称:{{ item.name }}</div>
                                                <div style="margin-left: 10px">{{ item.carid }}</div>
                                            </div>

                                        </div>
                                    </td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                    <td></td>
                                </tr>
                            </tbody>
                        </table> -->
                        <el-table border :data="tableData.slice((currentPage - 1) * pageSize, pageSize * currentPage)"
                            :default-sort="{ prop: 'date', order: 'descending' }">
                            <el-table-column label="用户信息">
                                <template #default="scope">
                                    <div style="display: flex; align-items: center">
                                        <div style="width: 50px;height: 50px;">
                                            <img :src=scope.row.imgaddress><img>
                                        </div>
                                        <div>
                                            <div style="margin-left: 10px">用户昵称:{{ scope.row.name }}</div>
                                            <div style="margin-left: 10px">{{ scope.row.carid }}</div>
                                        </div>

                                    </div>
                                </template>
                            </el-table-column>

                            <el-table-column prop="costAmount" label="消费金额" >
                                <template #default="scope">
                                    <span>
                                        ￥
                                    </span>
                                    <span>{{ scope.row.costAmount}}</span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="costType" label="消费类型" />
                            <el-table-column prop="operator" label="操作员" />
                            <el-table-column prop="indentid" label="订单编号" />
                            <el-table-column prop="indenttime" label="下单时间" />
                            <el-table-column prop="notes" label="备注" />
                            <el-table-column label="操作">
                                <template #default="scope">
                                    <div style="display: flex; align-items: center">
                                        <el-text style="margin-right: 10px; cursor: pointer;" class="mx-1" type="primary"
                                            @click="details">详情
                                        </el-text>

                                    </div>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                    <div class="demo-pagination-block">

                        <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize"
                            :page-sizes="[5, 10, 100, 200]" :small="small" :disabled="disabled" :background="background"
                            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
                            @current-change="handleCurrentChange" />
                    </div>
                </div>
            </div>
        </div>
    </div>



    
</template>
 
    
<script setup lang="ts">
import { ref } from 'vue'
import { reactive } from 'vue';
import type { TableColumnCtx } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'
import router from '@/router';
interface User {
    name: string
    carid: string
    imgaddress: string
    costAmount: number
    costType: string
    operator: string
    indentid: string
    indenttime: string
    notes: string

}


const input = ref('')
const select = ref('')
const currentPage = ref(1)
const pageSize = ref(5)

const small = ref(false)
const background = ref(false)
const disabled = ref(false)
const data_value = ref('')
const selectvalue = ref('')
const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
}
const details = ()=>{
    router.push('/home/XiaoFeiXiangQing')
}

const handleClose = (done: () => void) => {
    done()
}


interface SpanMethodProps {
    row: User
    column: TableColumnCtx<User>
    rowIndex: number
    columnIndex: number
}

const tableData: User[] = [
    {
        name: '2哥',
    carid: '123',
    imgaddress: 'assss',
    costAmount: 100,
    costType: '商品购买',
    operator: '小五',
    indentid: '20230508',
    indenttime: "2023-04-01",
    notes: '无',
    },
    {
        name: '2哥',
    carid: '123',
    imgaddress: 'assss',
    costAmount: 100,
    costType: '商品购买',
    operator: '小五',
    indentid: '20230508',
    indenttime: "2023-04-01",
    notes: '无',
    },
    {
        name: '2哥',
    carid: '123',
    imgaddress: 'assss',
    costAmount: 100,
    costType: '商品购买',
    operator: '小五',
    indentid: '20230508',
    indenttime: "2023-04-01",
    notes: '无',
    },
    {
        name: '2哥',
    carid: '123',
    imgaddress: 'assss',
    costAmount: 100,
    costType: '商品购买',
    operator: '小五',
    indentid: '20230508',
    indenttime: "2023-04-01",
    notes: '无',
    },
    {
        name: '2哥',
    carid: '123',
    imgaddress: 'assss',
    costAmount: 100,
    costType: '商品购买',
    operator: '小五',
    indentid: '20230508',
    indenttime: "2023-04-01",
    notes: '无',
    },
    {
        name: '2哥',
    carid: '123',
    imgaddress: 'assss',
    costAmount: 100,
    costType: '商品购买',
    operator: '小五',
    indentid: '20230508',
    indenttime: "2023-04-01",
    notes: '无',
    },
    {
        name: '2哥',
    carid: '123',
    imgaddress: 'assss',
    costAmount: 100,
    costType: '订房',
    operator: '小五',
    indentid: '20230508',
    indenttime: "2023-04-01",
    notes: '无',
    },
]
const total = tableData.length

const options = [
    {
        value: '订房',
        label: '订房',
    },
    {
        value: '商品购买',
        label: '商品购买',
    },
]

const edit = reactive(
    () => {
        console.log(2);
    })
const recharge = reactive(
    () => {
        console.log(3);
    })

</script>
 
 
<style scoped>
.body-header {
    height: 42.8px;


    display: flex;


}

.body-main {
    height: 90%;
    width: 100%;


}

.body-header-search {

    display: flex;
}





.input-with-select .el-input-group__prepend {
    background-color: var(--el-fill-color-blank);
}

:deep(.el-breadcrumb) {
    line-height: 45px;
    font-size: 16px;
}

.table {
    width: 100%;
    text-align: center;
    border: 1px solid #D5D5D5;
    border-collapse: collapse;
}

thead {
    font-size: 1em;
    background-color: #FAFAFA;
    border: none;
}

td {
    border: 1px solid #E8E8E8;
}
</style>
 